<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col v-if="device !== 'mobile'" class="left" :span="5">
        <div class="user-profile">
          <div class="box-center">
            <pan-thumb :image="author.avatar" :height="'100px'" :width="'100px'" :hoverable="false">
              <!-- 会员申请 -->
              <el-link v-if="author.userId === user.userId" type="primary" @click="showMemberForm">会员申请</el-link>
            </pan-thumb>
          </div>
          <div class="box-center">
            <div class="user-name text-center text-muted">
              <div v-if="author.sex === '1'">{{ author.userName }}<i class="el-icon-female red" />{{ author.sexName }}</div>
              <div v-else>{{ author.userName }}<i class="el-icon-male blue" />{{ author.sexName }}</div>
              <el-link v-if="author.userId === user.userId" type="primary" @click="editUserInfo">修改信息</el-link>
            </div>
            <div class="user-role text-center">
              <div class="badge-muted">
                <el-badge :value="userPosts" class="item">
                  <el-button size="mini" round>发布</el-button>
                </el-badge>
              </div>
              <div class="badge-muted">
                <el-badge :value="userWatchers" class="item">
                  <el-button size="mini" round>关注</el-button>
                </el-badge>
              </div>
              <div class="badge-muted">
                <el-badge :value="userWatched" class="item">
                  <el-button size="mini" round>粉丝</el-button>
                </el-badge>
              </div>
            </div>
          </div>
        </div>

        <div class="user-bio">
          <div class="user-education user-bio-section">
            <div class="user-bio-section-header" />
            <div class="user-bio-section-body">
              <div class="text-muted"><i class="el-icon-phone-outline" />{{ author.mobile || '无' }}</div>
              <div class="text-muted"><i class="el-icon-message" />{{ author.email || '无' }}</div>
              <div class="text-muted"><i class="el-icon-date" />{{ author.birthday || '无' }}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="device === 'mobile' ? 24 : 18">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="发布文章" name="post">
            <blog-list ref="post_list" :author="author.userId + ''" @read="readBlog" @edit="editBlog" @openCenter="openCenter" />
          </el-tab-pane>
          <el-tab-pane label="关注文章" name="watcher">
            <blog-list ref="watcher_list" :watcher="author.userId + ''" @read="readBlog" @edit="editBlog" @openCenter="openCenter" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false" :visible.sync="userMemberVisible" :append-to-body="true">
      <Member-Form ref="member_form" :info.sync="memberForm" :flow-data="flowData" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" icon="el-icon-check" @click="submitMemberForm()">确 定</el-button>
        <el-button icon="el-icon-close" @click="closeMemberForm()">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import BlogList from './blog/List'
import PanThumb from '@/components/PanThumb'
import MemberForm from '@/views/member'

export default {
  name: 'UserCenter',
  components: { BlogList, PanThumb, MemberForm },
  data() {
    return {
      userPosts: 0,
      userWatchers: 0,
      userWatched: 0,
      activeName: 'post',
      author: {
        userId: undefined,
        avatar: '',
        userName: '',
        sex: 0,
        sexName: '男',
        deptName: '',
        mobile: '',
        email: '',
        birthday: ''
      },
      userMemberVisible: false,
      memberForm: {
        memberId: undefined,
        userId: undefined,
        userName: undefined,
        memberLevel: undefined,
        flow_method_pre: 'userMemberReviewService.applyPre',
        flow_process_def_key: 'process_member_charge'
      },
      flowData: {
        readOnly: false,
        firstNode: true
      }
    }
  },
  computed: {
    ...mapState({
      device: state => state.app.device,
      user: state => state.user.info
    })
  },
  watch: {
    $route: {
      handler: function(route) {
        this.author.userId = route.query && route.query.userId
      },
      immediate: true
    }
  },
  mounted() {
    this.initUserInfo()
  },
  methods: {
    initUserInfo() {
      this.$http.get('/blog/center/' + this.author.userId).then(response => {
        this.author = response.param.user
        this.userPosts = response.param.userPosts
        this.userWatchers = response.param.userWatchers
        this.userWatched = response.param.userWatched
        this.$refs.post_list.queryData()
      }).catch(e => {})
    },
    handleTabClick(e) {
      if (e.name === 'post') {
        this.$refs.post_list.queryData()
      } else {
        this.$refs.watcher_list.queryData()
      }
    },
    async readBlog(articleId) {
      this.$router.push({ path: '/info', query: {
        articleId: articleId,
        redirect: this.$router.fullPath
      }})
    },
    async editBlog(articleId) {
      this.$router.push({ path: '/create', query: {
        articleId: articleId,
        redirect: this.$router.fullPath
      }})
    },
    async openCenter(userId) {
      this.$router.push({ path: '/center', query: {
        userId: userId
      }})
    },
    editUserInfo() {
      this.$router.push(`/profile?redirect=${this.$route.fullPath}`)
    },
    showMemberForm() {
      this.userMemberVisible = true
      this.$nextTick(() => {
        this.loadMemberForm()
      })
    },
    loadMemberForm() {
      this.$http.get('/member/loadForm').then(response => {
        this.memberForm = this.$api.objectUpdate(this.memberForm, response.param)
        this.$refs.member_form.init()
      }).catch(() => {})
    },
    submitMemberForm() {
      this.memberForm.flow_method_pre = 'userMemberReviewService.applyPre'
      this.memberForm.flow_process_def_key = 'process_member_charge'
      this.$http.post('/task/start/', this.memberForm).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.closeMemberForm()
      }).catch(() => {})
    },
    closeMemberForm(done) {
      this.memberForm = {
        memberId: undefined,
        userId: undefined,
        userName: undefined,
        memberLevel: undefined,
        flow_method_pre: 'userMemberReviewService.applyPre',
        flow_process_def_key: 'process_member_charge'
      }
      this.userMemberVisible = false
      if (done) {
        done()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  border-right: #dfe6ec 1px solid;
}

.box-center {
  margin: 0 auto;
  display: table;
}

.text-center {
  text-align: center;
}

.text-muted {
  color: #777;
  line-height: 25px;

  i {
    margin-right: 10px;
  }
}

.badge-muted {
  color: #777;
  display: inline;
  line-height: 20px;
  margin-right: 10px;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin: 0 20px 0 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
